<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-button type="primary" @click="dialogFormVisible = true"
            >新增课程</el-button
          ><el-dialog title="新增数据" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="课程名" class="item">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="课程类型">
                <el-select
                  v-model="form.type"
                  placeholder="请选择"
                  style="width: 520px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="课时数" class="item">
                <el-input v-model="form.times"></el-input>
              </el-form-item>
              <el-form-item label="价格" class="item">
                <el-input v-model="form.price"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="toAdd(form), (dialogFormVisible = false)"
                >立即创建</el-button
              >
            </div>
          </el-dialog>
        </el-col>

        <el-col :span="3"
          ><el-button @click="page(1)">查询全部</el-button></el-col
        >
        <el-col :span="6" :offset="12">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="input2"
            :model="input2"
            @keyup.enter.native="search(input2, 1)"
          >
            <el-button
              style="padding-right:10px"
              slot="suffix"
              type="text"
              @click="search(input2, 1)"
              >搜索</el-button
            >
          </el-input></el-col
        >
      </el-row>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="课程名">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag style="font-size: 20px;">{{ scope.row.name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程类型">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.type === 1" style="font-size: 20px;"
                >兴趣组</el-tag
              >
              <el-tag v-else style="font-size: 20px;">提高组</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课时数">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag style="font-size: 20px;">{{ scope.row.times }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格（¥）">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag style="font-size: 20px;">{{ scope.row.price }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="medium" @click="dialogFormVisible = true"
              >编辑</el-button
            >

            <el-popover placement="top" width="160" v-model="visible">
              <p style="text-algin: center">确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleDelete(scope.row.id), (visible = false)"
                  >确定</el-button
                >
              </div>
              <el-button size="medium" type="danger" slot="reference"
                >删除</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="page"
          background
          align="center"
          layout="prev, pager, next"
          v-if="this.$store.getters.getQuery"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          style="margin-top: 70px;font-size: 20px"
        >
        </el-pagination>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="page"
          background
          align="center"
          layout="prev, pager, next"
          v-else
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          style="margin-top: 70px;font-size: 20px"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import ElementUI from "element-ui";
export default {
  mounted() {
    this.page(1);
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 9,
      input2: "",
      loading: false,
      dialogFormVisible: false,
      dialogTableVisible: false,
      dialogFormVisible2: false,
      form: {
        name: "拼图",
        type: "1",
        price: "299.9",
        times: "20"
      },
      formLabelWidth: "120px",
      options: [
        {
          value: "1",
          label: "兴趣课程"
        },
        {
          value: "2",
          label: "提高课程"
        }
      ]
    };
  },
  components: {
    ElementUI
  },
  methods: {
    resetForm() {
      this.formData = {};
    },
    // 弹出添加窗口
    handleCreate() {
      this.resetForm();
      this.dialogFormVisible = true;
    },
    toAdd(form) {
      this.$axios.post("/course/save", form).then(res => {
        alert("新增成功");
        this.page(1);
      });
    },
    page(currentPage) {
      this.loading = true;
      const _this = this;
      _this.$axios.get("/course/view?currentPage=" + currentPage).then(res => {
        _this.tableData = res.data.data.records;
        console.log(this.tableData);
        _this.currentPage = currentPage;
        _this.total = res.data.data.total;
        _this.pageSize = res.data.data.size;
      });
      this.loading = false;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(id) {
      const params = new URLSearchParams();
      params.append("id", id);
      console.log("*********");
      console.log(params);
      console.log("*********");
      this.$axios.post("/student/delete", params).then(res => {
        alert("删除成功");
        this.page(1);
      });
      console.log(JSON.stringify(id));
    },
    //每页下拉显示数据
    handleSizeChange: function(size) {
      this.pagesize = size;
      /*console.log(this.pagesize) */
    },
    //点击第几页
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      /*console.log(this.currentPage) */
    },
    search(name, currentPage) {
      this.loading = true;
      if (name === "") {
        this.page(1);
        ElementUI.Message.error({
          title: "错误",
          message: "查询不能为空",
          duration: 2.5 * 1000
        });
      }
      this.$axios
        .post("/course/search?name=" + name + "&currentPage=" + currentPage)
        .then(res => {
          const _this = this;
          _this.tableData = res.data.data.records;
          console.log(this.tableData);
          _this.currentPage = currentPage;
          _this.total = res.data.data.total;
          _this.pageSize = res.data.data.size;
          _this.$store.commit("SET_QUERY");
        });
      this.loading = false;
    }
  }
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: auto;
  height: 700px;
}
.name-wrappe {
  font-size: 800px !important;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
